<template>
    <div class="aside">
      <div class="allScreenMask" v-if="openAside"  @click="closeMobileSidebar">
      </div>
      <!-- <sticky stickyTop="60" myheight="100%" zIndex="10"> -->
      <div class="aside-tool" v-if="category.length===0">
        <div class="search-box">
          <input id="keyword"
                 list="keywords"
                 placeholder="Search..."
                 v-model.trim="keyword"
                 @keyup.enter="toSearch" />
          <button class="search-btn" @click="toSearch">
            <i class="iconfont icon-sousuo1"></i>
            <!-- <svg-icon icon-class="table"></svg-icon> -->
          </button>
        </div>
        <div class="aside-list">
          <aside-list></aside-list>
        </div>
      </div>
      <category v-if="category.length>0"></category>
     <!-- </sticky> -->
    </div>
</template>
<script>
import category from 'base/Category'
import AsideList from 'base/AsideList'
import Sticky from 'base/Sticky'
import { mapGetters } from 'vuex'
import bus from 'base/Bus'
export default{
  name: 'asideR',
  data() {
    return {
      keyword: ''
    }
  },
  computed: {
    ...mapGetters([
      'category',
      'openAside'
    ])
  },
  components: {
    category,
    AsideList,
    Sticky
  },
  methods: {
    toSearch() {
      if (!this.keyword) {
        this.$toast('要输入关键词的')
        return false
      }
      if (this.$route.params.search !== 'search') {
        this.$router.push({ name: 'search', query: { keyword: this.keyword }})
        bus.$emit('switch')
      }
    },
    closeMobileSidebar() {
      if (this.openAside) {
        this.$store.dispatch('OpenAsideBar', !this.openAside)
      }
    }
  }
}
</script>
<style lang="scss">
.aside {
  height: 100%;
  .allScreenMask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background-color: rgba(25,25,25,0.5);
  }
  .search-box {
    padding: 10px;
    background-color: rgba(255,255,255,0.5);
  }
  .aside-list {
    background-color: rgba(255,255,255,0.5);
  }
}
</style>
